<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能时间管理系统 - 多场景应用</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .header p {
            font-size: 1.1em;
            opacity: 0.9;
        }

        .main-content {
            padding: 40px;
        }

        .time-display-section {
            text-align: center;
            margin-bottom: 40px;
        }

        .clock-display {
            font-family: 'Share Tech Mono', monospace;
            font-size: 4em;
            font-weight: 700;
            color: #2ecc71;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 30px 40px;
            border-radius: 15px;
            border: 3px solid #2ecc71;
            box-shadow: 
                inset 0 2px 5px rgba(0, 0, 0, 0.1),
                0 10px 30px rgba(46, 204, 113, 0.3);
            text-shadow: 0 0 20px rgba(46, 204, 113, 0.8);
            transition: all 0.3s ease;
            margin-bottom: 20px;
            display: inline-block;
        }

        .clock-display:hover {
            transform: scale(1.02);
            box-shadow: 
                inset 0 2px 5px rgba(0, 0, 0, 0.1),
                0 15px 40px rgba(46, 204, 113, 0.4);
        }

        .date-display {
            font-size: 1.2em;
            color: #666;
            margin-bottom: 10px;
        }

        .timezone-info {
            font-size: 0.9em;
            color: #888;
            margin-bottom: 20px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid #e0e0e0;
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .feature-title {
            font-size: 1.3em;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .feature-icon {
            width: 30px;
            height: 30px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .time-inputs {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .time-group {
            flex: 1;
            min-width: 150px;
        }

        .time-group label {
            display: block;
            margin-bottom: 8px;
            color: #555;
            font-weight: 500;
        }

        .time-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .time-group input:focus {
            outline: none;
            border-color: #4facfe;
        }

        .action-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            width: 100%;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            font-weight: 500;
            display: none;
        }

        .result.success {
            background: linear-gradient(135deg, #a8edea, #fed6e3);
            color: #2c5530;
            border: 1px solid #a8edea;
        }

        .result.warning {
            background: linear-gradient(135deg, #ffecd2, #fcb69f);
            color: #8b4513;
            border: 1px solid #ffecd2;
        }

        .result.info {
            background: linear-gradient(135deg, #a8caba, #5d4e75);
            color: white;
            border: 1px solid #a8caba;
        }

        .timezone-selector {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .timezone-group {
            flex: 1;
            min-width: 200px;
        }

        .timezone-group select {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .timezone-group select:focus {
            outline: none;
            border-color: #4facfe;
        }

        .world-clock {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .world-clock-item {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            border: 1px solid #dee2e6;
        }

        .world-clock-city {
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .world-clock-time {
            font-family: 'Share Tech Mono', monospace;
            font-size: 1.1em;
            color: #2ecc71;
        }

        .dashboard {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 30px;
            border-radius: 15px;
            margin-top: 30px;
        }

        .dashboard h2 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.8em;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.2);
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .stat-number {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 0.9em;
            opacity: 0.9;
        }

        .code-section {
            background: #272b33;
            color: #f8f8f2;
            padding: 30px;
            border-radius: 15px;
            margin-top: 30px;
        }

        .code-section h2 {
            color: #61dafb;
            margin-bottom: 20px;
            font-size: 1.4em;
            border-bottom: 2px solid #61dafb;
            padding-bottom: 10px;
        }

        .code-display {
            background: #1e1e1e;
            padding: 20px;
            border-radius: 8px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 0.9em;
            overflow-x: auto;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .footer {
            background: #f8f9fa;
            padding: 20px;
            text-align: center;
            color: #666;
            border-top: 1px solid #e0e0e0;
        }

        @media (max-width: 768px) {
            .features-grid {
                grid-template-columns: 1fr;
            }
            
            .time-inputs {
                flex-direction: column;
            }

            .clock-display {
                font-size: 2.5em;
                padding: 20px 25px;
            }
            
            .header h1 {
                font-size: 2em;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>🕐 智能时间管理系统</h1>
            <p>多场景时间应用 - 精确的时间计算与转换</p>
        </div>

        <div class="main-content">
            <!-- 主时钟显示 -->
            <div class="time-display-section">
                <div class="date-display" id="current-date"></div>
        <div id="clock" class="clock-display"></div>
                <div class="timezone-info" id="timezone-info"></div>
            </div>

            <!-- 功能模块 -->
            <div class="features-grid">
                <!-- 工作时间计算 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">⏰</div>
                        工作时间计算
                    </div>
                    <div class="time-inputs">
                        <div class="time-group">
                            <label>上班时间</label>
                            <input type="time" id="work-start" value="09:00">
                        </div>
                        <div class="time-group">
                            <label>下班时间</label>
                            <input type="time" id="work-end" value="18:00">
                        </div>
                    </div>
                    <button class="action-btn" onclick="calculateWorkHours()">计算工作时长</button>
                    <div id="work-result" class="result"></div>
                </div>

                <!-- 会议时间管理 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">📅</div>
                        会议时间管理
                    </div>
                    <div class="time-inputs">
                        <div class="time-group">
                            <label>会议开始时间</label>
                            <input type="time" id="meeting-start" value="14:00">
                        </div>
                        <div class="time-group">
                            <label>会议时长(分钟)</label>
                            <input type="number" id="meeting-duration" value="60" min="15" max="480">
                        </div>
                    </div>
                    <button class="action-btn" onclick="calculateMeetingEnd()">计算结束时间</button>
                    <div id="meeting-result" class="result"></div>
                </div>

                <!-- 时区转换 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">🌍</div>
                        时区转换
                    </div>
                    <div class="timezone-selector">
                        <div class="timezone-group">
                            <label>源时区</label>
                            <select id="source-timezone">
                                <option value="Asia/Shanghai">中国标准时间 (UTC+8)</option>
                                <option value="America/New_York">美国东部时间 (UTC-5)</option>
                                <option value="Europe/London">英国时间 (UTC+0)</option>
                                <option value="Asia/Tokyo">日本时间 (UTC+9)</option>
                                <option value="Australia/Sydney">澳大利亚时间 (UTC+10)</option>
                            </select>
                        </div>
                        <div class="timezone-group">
                            <label>目标时区</label>
                            <select id="target-timezone">
                                <option value="America/New_York">美国东部时间 (UTC-5)</option>
                                <option value="Asia/Shanghai">中国标准时间 (UTC+8)</option>
                                <option value="Europe/London">英国时间 (UTC+0)</option>
                                <option value="Asia/Tokyo">日本时间 (UTC+9)</option>
                                <option value="Australia/Sydney">澳大利亚时间 (UTC+10)</option>
                            </select>
                        </div>
                    </div>
                    <button class="action-btn" onclick="convertTimezone()">转换时区</button>
                    <div id="timezone-result" class="result"></div>
                </div>

                <!-- 倒计时器 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">⏳</div>
                        智能倒计时器
                    </div>
                    <div class="time-inputs">
                        <div class="time-group">
                            <label>目标时间</label>
                            <input type="datetime-local" id="countdown-target">
                        </div>
                        <div class="time-group">
                            <label>倒计时名称</label>
                            <input type="text" id="countdown-name" placeholder="例如：项目截止">
                        </div>
                    </div>
                    <button class="action-btn" onclick="startCountdown()">开始倒计时</button>
                    <div id="countdown-result" class="result"></div>
                </div>

                <!-- 时间格式化 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">🔄</div>
                        时间格式化
                    </div>
                    <div class="time-inputs">
                        <div class="time-group">
                            <label>时间戳</label>
                            <input type="number" id="timestamp-input" placeholder="输入时间戳">
                        </div>
                        <div class="time-group">
                            <label>格式类型</label>
                            <select id="format-type">
                                <option value="colon">冒号格式 (HH:MM:SS)</option>
                                <option value="12hour">12小时制</option>
                                <option value="24hour">24小时制</option>
                                <option value="relative">相对时间</option>
                            </select>
                        </div>
                    </div>
                    <button class="action-btn" onclick="formatTime()">格式化时间</button>
                    <div id="format-result" class="result"></div>
                </div>

                <!-- 时间统计 -->
                <div class="feature-card">
                    <div class="feature-title">
                        <div class="feature-icon">📊</div>
                        时间统计分析
                    </div>
                    <div class="time-inputs">
                        <div class="time-group">
                            <label>开始日期</label>
                            <input type="date" id="stats-start">
                        </div>
                        <div class="time-group">
                            <label>结束日期</label>
                            <input type="date" id="stats-end">
                        </div>
                    </div>
                    <button class="action-btn" onclick="analyzeTimeStats()">分析时间统计</button>
                    <div id="stats-result" class="result"></div>
                </div>
            </div>

            <!-- 世界时钟 -->
            <div class="feature-card">
                <div class="feature-title">
                    <div class="feature-icon">🌐</div>
                    世界时钟
                </div>
                <div class="world-clock" id="world-clock">
                    <!-- 动态生成世界时钟 -->
                </div>
            </div>

            <!-- 数据统计面板 -->
            <div class="dashboard">
                <h2>📈 时间使用统计</h2>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number" id="total-calculations">0</div>
                        <div class="stat-label">总计算次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="avg-work-hours">0</div>
                        <div class="stat-label">平均工作时长(小时)</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="timezone-conversions">0</div>
                        <div class="stat-label">时区转换次数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number" id="active-countdowns">0</div>
                        <div class="stat-label">活跃倒计时</div>
                    </div>
                </div>
            </div>

            <!-- 代码展示区域 -->
            <div class="code-section">
                <h2>🔧 核心代码实现</h2>
        <div class="code-display">
                    <pre><code id="codeSnippet">// 核心时间格式化函数
const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

// 扩展功能函数
const formatTime12Hour = date => {
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    const ampm = hours >= 12 ? 'PM' : 'AM';
    const displayHours = hours % 12 || 12;
    return `${displayHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${ampm}`;
};

const getRelativeTime = date => {
    const now = new Date();
    const diff = now - date;
    const seconds = Math.floor(diff / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    
    if (days > 0) return `${days}天前`;
    if (hours > 0) return `${hours}小时前`;
    if (minutes > 0) return `${minutes}分钟前`;
    return '刚刚';
};</code></pre>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>© 2024 智能时间管理系统 | 专业的时间管理工具</p>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <script>
        // 核心时间格式化函数
        const getColonTimeFromDate = date => date.toTimeString().slice(0, 8);

        // 全局变量
        let totalCalculations = 0;
        let workHoursData = [];
        let timezoneConversions = 0;
        let activeCountdowns = 0;
        let countdownIntervals = [];

        // 初始化页面
        document.addEventListener('DOMContentLoaded', function() {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('stats-start').value = today;
            document.getElementById('stats-end').value = today;

            // 设置倒计时目标时间为1小时后
            const oneHourLater = new Date();
            oneHourLater.setHours(oneHourLater.getHours() + 1);
            document.getElementById('countdown-target').value = oneHourLater.toISOString().slice(0, 16);
            
            // 初始化世界时钟
            initWorldClock();
            
            // 突出显示代码
            hljs.highlightAll();
        });

        // 更新主时钟显示
        function updateClock() {
            const now = new Date();
            const currentTime = getColonTimeFromDate(now);
            const currentDate = now.toLocaleDateString('zh-CN', {
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                weekday: 'long'
            });
            const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
            
            document.getElementById('clock').textContent = currentTime;
            document.getElementById('current-date').textContent = currentDate;
            document.getElementById('timezone-info').textContent = `时区: ${timezone}`;
        }

        // 计算工作时长
        function calculateWorkHours() {
            const startTime = document.getElementById('work-start').value;
            const endTime = document.getElementById('work-end').value;
            
            if (!startTime || !endTime) {
                showResult('work-result', '❌ 请填写完整的上班和下班时间', 'warning');
                return;
            }
            
            const [startHour, startMinute] = startTime.split(':').map(Number);
            const [endHour, endMinute] = endTime.split(':').map(Number);
            
            let totalMinutes = (endHour * 60 + endMinute) - (startHour * 60 + startMinute);
            
            if (totalMinutes < 0) {
                totalMinutes += 24 * 60; // 跨天处理
            }
            
            const hours = Math.floor(totalMinutes / 60);
            const minutes = totalMinutes % 60;
            
            let resultClass = 'success';
            let message = '';
            
            if (totalMinutes > 8 * 60) {
                resultClass = 'warning';
                message = `⚠️ 工作时长较长：${hours}小时${minutes}分钟，请注意休息`;
            } else if (totalMinutes < 6 * 60) {
                resultClass = 'warning';
                message = `⚠️ 工作时长较短：${hours}小时${minutes}分钟`;
            } else {
                message = `✅ 标准工作时长：${hours}小时${minutes}分钟`;
            }
            
            showResult('work-result', message, resultClass);
            workHoursData.push(totalMinutes);
            updateStats();
        }

        // 计算会议结束时间
        function calculateMeetingEnd() {
            const startTime = document.getElementById('meeting-start').value;
            const duration = parseInt(document.getElementById('meeting-duration').value);
            
            if (!startTime || !duration) {
                showResult('meeting-result', '❌ 请填写完整的会议信息', 'warning');
                return;
            }
            
            const [startHour, startMinute] = startTime.split(':').map(Number);
            const startDate = new Date();
            startDate.setHours(startHour, startMinute, 0, 0);
            
            const endDate = new Date(startDate.getTime() + duration * 60000);
            const endTime = getColonTimeFromDate(endDate);
            
            let resultClass = 'info';
            let message = '';
            
            if (duration > 120) {
                resultClass = 'warning';
                message = `⚠️ 会议时长较长：${duration}分钟，结束时间：${endTime}`;
            } else {
                message = `📅 会议结束时间：${endTime} (时长：${duration}分钟)`;
            }
            
            showResult('meeting-result', message, resultClass);
            updateStats();
        }

        // 时区转换
        function convertTimezone() {
            const sourceTimezone = document.getElementById('source-timezone').value;
            const targetTimezone = document.getElementById('target-timezone').value;
            
            const now = new Date();
            const sourceTime = new Date(now.toLocaleString('en-US', { timeZone: sourceTimezone }));
            const targetTime = new Date(now.toLocaleString('en-US', { timeZone: targetTimezone }));
            
            const sourceTimeStr = getColonTimeFromDate(sourceTime);
            const targetTimeStr = getColonTimeFromDate(targetTime);
            
            const message = `🌍 ${sourceTimezone.split('/')[1]}: ${sourceTimeStr} → ${targetTimezone.split('/')[1]}: ${targetTimeStr}`;
            
            showResult('timezone-result', message, 'info');
            timezoneConversions++;
            updateStats();
        }

        // 开始倒计时
        function startCountdown() {
            const targetTime = new Date(document.getElementById('countdown-target').value);
            const countdownName = document.getElementById('countdown-name').value || '倒计时';
            
            if (!targetTime || targetTime <= new Date()) {
                showResult('countdown-result', '❌ 请设置有效的未来时间', 'warning');
                return;
            }
            
            // 清除之前的倒计时
            countdownIntervals.forEach(clearInterval);
            countdownIntervals = [];
            
            const interval = setInterval(() => {
                const now = new Date();
                const diff = targetTime - now;
                
                if (diff <= 0) {
                    showResult('countdown-result', `🎉 ${countdownName} 时间到！`, 'success');
                    clearInterval(interval);
                    activeCountdowns = Math.max(0, activeCountdowns - 1);
                    updateStats();
                    return;
                }
                
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);
                
                const message = `⏳ ${countdownName}: ${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`;
                showResult('countdown-result', message, 'info');
            }, 1000);
            
            countdownIntervals.push(interval);
            activeCountdowns++;
            updateStats();
        }

        // 时间格式化
        function formatTime() {
            const timestamp = document.getElementById('timestamp-input').value;
            const formatType = document.getElementById('format-type').value;
            
            if (!timestamp) {
                showResult('format-result', '❌ 请输入时间戳', 'warning');
                return;
            }
            
            const date = new Date(parseInt(timestamp));
            
            let formattedTime = '';
            switch (formatType) {
                case 'colon':
                    formattedTime = getColonTimeFromDate(date);
                    break;
                case '12hour':
                    formattedTime = formatTime12Hour(date);
                    break;
                case '24hour':
                    formattedTime = date.toLocaleTimeString('zh-CN', { hour12: false });
                    break;
                case 'relative':
                    formattedTime = getRelativeTime(date);
                    break;
            }
            
            showResult('format-result', `🔄 格式化结果: ${formattedTime}`, 'info');
            updateStats();
        }

        // 时间统计分析
        function analyzeTimeStats() {
            const startDate = new Date(document.getElementById('stats-start').value);
            const endDate = new Date(document.getElementById('stats-end').value);
            
            if (startDate > endDate) {
                showResult('stats-result', '❌ 开始日期不能晚于结束日期', 'warning');
                return;
            }
            
            const diffDays = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
            const diffHours = diffDays * 24;
            const diffMinutes = diffHours * 60;
            
            const message = `📊 时间跨度: ${diffDays}天 (${diffHours}小时, ${diffMinutes}分钟)`;
            showResult('stats-result', message, 'info');
            updateStats();
        }

        // 初始化世界时钟
        function initWorldClock() {
            const cities = [
                { name: '北京', timezone: 'Asia/Shanghai' },
                { name: '纽约', timezone: 'America/New_York' },
                { name: '伦敦', timezone: 'Europe/London' },
                { name: '东京', timezone: 'Asia/Tokyo' },
                { name: '悉尼', timezone: 'Australia/Sydney' },
                { name: '巴黎', timezone: 'Europe/Paris' }
            ];
            
            const worldClockContainer = document.getElementById('world-clock');
            worldClockContainer.innerHTML = '';
            
            cities.forEach(city => {
                const cityElement = document.createElement('div');
                cityElement.className = 'world-clock-item';
                cityElement.innerHTML = `
                    <div class="world-clock-city">${city.name}</div>
                    <div class="world-clock-time" id="world-clock-${city.name}"></div>
                `;
                worldClockContainer.appendChild(cityElement);
            });
            
            // 更新世界时钟
            updateWorldClock();
            setInterval(updateWorldClock, 1000);
        }

        // 更新世界时钟
        function updateWorldClock() {
            const cities = ['北京', '纽约', '伦敦', '东京', '悉尼', '巴黎'];
            const timezones = ['Asia/Shanghai', 'America/New_York', 'Europe/London', 'Asia/Tokyo', 'Australia/Sydney', 'Europe/Paris'];
            
            cities.forEach((city, index) => {
                const now = new Date();
                const cityTime = new Date(now.toLocaleString('en-US', { timeZone: timezones[index] }));
                const timeElement = document.getElementById(`world-clock-${city}`);
                if (timeElement) {
                    timeElement.textContent = getColonTimeFromDate(cityTime);
                }
            });
        }

        // 扩展功能函数
        function formatTime12Hour(date) {
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            const ampm = hours >= 12 ? 'PM' : 'AM';
            const displayHours = hours % 12 || 12;
            return `${displayHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')} ${ampm}`;
        }

        function getRelativeTime(date) {
            const now = new Date();
            const diff = now - date;
            const seconds = Math.floor(diff / 1000);
            const minutes = Math.floor(seconds / 60);
            const hours = Math.floor(minutes / 60);
            const days = Math.floor(hours / 24);
            
            if (days > 0) return `${days}天前`;
            if (hours > 0) return `${hours}小时前`;
            if (minutes > 0) return `${minutes}分钟前`;
            return '刚刚';
        }

        // 显示结果
        function showResult(elementId, message, className) {
            const element = document.getElementById(elementId);
            element.textContent = message;
            element.className = `result ${className}`;
            element.style.display = 'block';
        }

        // 更新统计数据
        function updateStats() {
            totalCalculations++;
            
            const avgWorkHours = workHoursData.length > 0 
                ? Math.round(workHoursData.reduce((a, b) => a + b, 0) / workHoursData.length / 60 * 10) / 10
                : 0;
            
            document.getElementById('total-calculations').textContent = totalCalculations;
            document.getElementById('avg-work-hours').textContent = avgWorkHours;
            document.getElementById('timezone-conversions').textContent = timezoneConversions;
            document.getElementById('active-countdowns').textContent = activeCountdowns;
        }

        // 每秒更新主时钟
        setInterval(updateClock, 1000);
        updateClock();
    </script>
</body>

</html>